.anime-list {
  display: grid; /* 使用 Grid 布局 */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* 歌单项的最小宽度是 120px，1fr 表示自适应填充 */
  gap: 10px; /* 设置歌单项之间的间距 */
}

.anime-card {
  width: 220px; /* 卡片宽度 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 卡片阴影 */
  border-radius: 8px; /* 卡片圆角 */
  overflow: hidden; /* 隐藏溢出内容 */
  background: #fff; /* 卡片背景颜色 */
  transition: transform 0.3s ease; /* 鼠标悬停上浮效果 */
}

.anime-card:hover {
  transform: translateY(-8px); /* 鼠标悬停上浮效果 */
}

.anime-cover {
  width: 100%; /* 图片宽度自适应卡片 */
  height: 280px; /* 图片高度 */
  object-fit: cover; /* 图片填充方式 */
}

.anime-title {
  font-size: 14px;
  font-weight: bold;
  margin: 8px; /* 标题外边距 */
  color: #333; /* 标题颜色 */
  text-align: center; /* 标题居中 */
}
.search-container {
  margin-bottom: 20px;
  text-align: center;
}

.search-input {
  padding: 10px 20px;
  width: 100%; /* 宽度可以进行调整 */
  max-width: 400px; /* 最大宽度限制 */
  border-radius: 20px; /* 圆角边框 */
  border: 1px solid #ddd; /* 边框颜色 */
  font-size: 14px; /* 输入文字大小 */
  margin-top: 20px;
}

.search-input:focus {
  outline: none; /* 去除选中时的默认边框 */
  box-shadow: 0 0 8px rgba(0,0,0,0.2); /* 添加聚焦阴影效果 */
  transition: all 0.2s;
}

/* 搜索输入框的水印提示文字样式 */
.search-input::placeholder {
  color: #bbb; /* 水印提示文字颜色 */
}
//过渡效果
.come-in {
  opacity: 1;
  transform: translateY(150px);
  animation: come-in 1s ease forwards;
}

.come-in:nth-child(odd) {
  animation-duration: 1s;
}

.already-visible {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  100% {
    transform: translateY(0);
  }
}

.opaque {
  opacity: 0;
}
